<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list">
                    <li class="active" id="search-link"><a href="#search" data-toggle="tab" role="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="search">
                        <div class="panel-body">
                                <div class="ibox-title" style="border: none;"><h5 style="color: #00afef"><i>Search</i></h5>
                                </div>
                                <div class="ibox-content">
                                    <form class="form-horizontal" id="account_form_search">
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">Entity Name</label>
                                            <div class="col-lg-5">
                                                <input type="text" name="entity_name_s" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">Account #</label>
                                            <div class="col-lg-5">
                                                <input type="text" name="acct_num_s" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">Account Name</label>
                                            <div class="col-lg-5">
                                                <input type="text" name="acct_name_s" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label"></label>
                                            <div class="col-lg-5">
                                                <a id="clear_tbl_result" href="javascript:document.getElementById('account_form_search').reset();" class="btn btn-warning btn-md pull-right m-t-n-xs clear-btn" > Clear</a>
                                                <button type="button" class="btn btn-primary btn-md pull-right m-t-n-xs search-btn btn-margin-right" id="search_account"> Search</button>
                                            </div>
                                        </div>
                                    </form>
                                    </div>
                                    <button id="add-form-tab" class="btn btn-success m-t-n-xs btn-md add-tab-btn" type="button"> Add</button>
                                <div class="ibox-content">
                                <!-- <table data-filter="#filter" class="dataTables table table-stripped table-hover table-bordered toggle-arrow-tiny table-compact" data-page-navigation=".pagination" data-limit-navigation="5" data-page-size="50">
                                        <thead>
                                            <tr>
                                                <th data-sort-ignore="true" data-type="alpha" >Entity Name</th>
                                                <th data-sort-ignore="false" data-type="numeric" style="width:90px;">Account #</th>
                                                <th data-sort-ignore="true" data-type="alpha" >Account Name</th>
                                                <th data-sort-ignore="true" style="width:100px;">Account Type</th>
                                                <th data-sort-ignore="true" style="width:90px;">Status</th>
                                                <th data-sort-ignore="true" >Enable</th>
                                                <th data-sort-ignore="true" style="padding:8px;text-align:center;width:100px;">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="result_account">
                                        </tbody>
                                        <tfoot >
                                            <tr >
                                                <td colspan="7" style='border: none !important;'>
                                                    <ul class="pagination pull-right"></ul>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table> -->
                                  <table style="width: 100%;" class="dataTables table table-stripped table-hover table-bordered toggle-arrow-tiny table-compact">
                                        <thead>
                                            <tr>
                                                <th class="no-sort">Entity Name</th>
                                                <th>Account #</th>
                                                <th class="no-sort">Account Name</th>
                                                <th class="no-sort">Account Type</th>
                                                <th class="no-sort">Status</th>
                                                <th class="no-sort">Enable</th>
                                                <th class="no-sort">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="result_account">
                                        </tbody>
                                    </table>
                                </div>
                            </div><!--END OF iBox-->
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
    $(document).ready(function() {
        $('#clear_tbl_result').click(function(){
            $('#result_entity').html('');
        });

        $('.dataTables').DataTable( {
                "columnDefs": [ {
                  "targets": 'no-sort',
                  "orderable": false,
            } ],
            "sDom": 'tip'
        } );

        $('#tab-list').on('click','#close-add-body',function(){
            var tabId = $(this).parents('li').children('a').attr('href');
            // $(this).parents('li').remove('li');
            // $(tabId).remove();
            // $('#tab-list a:first').tab('show');
            if(tabId == "#view"){
                $('#count_view').val('0');
                $(this).parents('li').remove('li');
                $(tabId).remove();
                $('#tab-list a:first').tab('show');
            }else{
                alert_cancel(tabId,$(this));
            }
        });

         $('#add-form-tab').click(function(){
            sessionStorage.chglistbtncount1 = '0';
            if($('#count_add').val() == 0){
                $('#tab-list').append('<li id="add-link"><a href="#add" role="tab" data-toggle="tab">Add<button id="addX" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="add"><div class="panel-body"><div id="add_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $("#add_data").load("<?php echo base_url($this->session->userdata('forajax') . '/add_form/'); ?>");
                $('#add-link').show();
                $('#count_add').val('1');
            }
            $('#tab-list a[href="#add"]').tab('show');
        });

         $(document).on('click','.edit',function(){
            sessionStorage.chglistbtncount2 = '0';
            sessionStorage.entity_id_e = '';
            console.log($(this).attr('entid'));
            console.log($(this).attr('acctid'));
            var acctid = $(this).attr('acctid');
            var eid = $(this).attr('entid');
            console.log(acctid);
            sessionStorage.account_id_e2 = acctid;
            sessionStorage.acct_entity_id_e = eid;
            if($('#count_edit').val() == 0){
                $('#tab-list').append('<li id="edit-link"><a href="#edit" role="tab" data-toggle="tab">Edit<button id="editX" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="edit"><div class="panel-body"><div id="edit_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#edit-link').show();
                $('#count_edit').val('1');
            }
            $("#edit_data").html('<div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div>');
            $("#edit_data").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>" + acctid);
            $('#tab-list a[href="#edit"]').tab('show');
         });

         $(document).on('click','.view',function(){
            //sessionStorage.entity_id_v = '';
            var acctid = $(this).attr('acctid');
            var eid = $(this).attr('entid');
            sessionStorage.account_id_v2 = acctid;
            if($('#count_view').val() == 0){
                $('#tab-list').append('<li id="view-link"><a href="#view" role="tab" data-toggle="tab">View<button id="close-add-body" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="view"><div class="panel-body"><div id="view_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#view-link').show();
                $('#count_view').val('1');
            }
            $("#view_data").html('<div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div>');
            $("#view_data").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>" + acctid);
            $('#tab-list a[href="#view"]').tab('show');
         });

        $(document).on('click','.delete',function(){
            //sessionStorage.entity_id_v = '';
            var eid     = $(this).closest('tr').children('#entity_id_v').text();
            var acctid  = $(this).closest('tr').children('#account_id_v').text();
            var accnum  = $(this).closest('tr').children('#account_num_v').text();
            var accname = $(this).closest('tr').children('#account_name_v').text();

            delete_alert(acctid,eid,accnum,accname);
           
         });


        function delete_alert(acctId,entityId,accNum,accName){
              swal({
                    title: "Are you sure?",
                    text: "This line in sequence will be deleted !",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: true},
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url:"<?php echo base_url($this->session->userdata('forajax') . '/deleteAccount'); ?>",
                            method:"POST",
                            data:{'acc_id' : acctId , 'ent_id' : entityId , 'acc_num' : accNum , 'acc_name' : accName},
                            dataType:"json",
                            success: function (data){
                                if(data[0].error == 1){
                                      notifymsg("danger",data[0].msg);
                                }else{
                                  
                                  notifymsg("success",". . .List Sequence Delete Successfully");
                                  $("#search_account").click(); 
                                  
                                }

                            }
                        });
                    } else {
                        swal("Cancelled");
                    }
                });
               
        }



        $('#account_form_search').keydown(function (e) {
          if (e.which == 13) {
            $('#account_form_search #search_account').trigger('click');
            return false;  
          }
        });

         $('#search_account').click(function(e){
            $('.dataTables').dataTable().fnDestroy();
            e.preventDefault();
            $('#result_account').html('');
            var acctname = $('#account_form_search input[name=acct_name_s]').val();
            var acctnum = $('#account_form_search input[name=acct_num_s]').val();
            var entityname = $('#account_form_search input[name=entity_name_s]').val();
            $.ajax({
                url: "<?php echo base_url($this->session->userdata('forajax') . '/searchaccount'); ?>",
                method:'post',
                data: {'acct_num' : acctnum, 'acct_name' : acctname, 'entity_name' : entityname },
                dataType:'json',
                success: function (data) {
                    console.log(data);
                    if(data == "No results found."){
                        notifymsg('success','<b>Success</b>: 0 Result Found.');
                    }else{
                        var tmp = '';
                        var count = 0;
                        $.each(data, function(i,item){
                            var checks = 'checked';
                            if(data[i].enable_flag == 'N'){
                                checks = '';
                            }
                            switch (data[i].status) {
                                case 'INACT':
                                    title = "In-Active";
                                    type = 'danger';
                                    break;
                                case 'ACT':
                                    title = "Active";
                                    type = 'primary';
                                    break;
                                case 'PND':
                                    title = "Pending";
                                    type = 'warning';
                                    break;
                                default:
                                    title = "Looking forward to the Weekend";
                                    break;
                            }
                            if(data[i].status == 'PND'){
                                tmp += "<tr style='line-height:1px;'><td align=''>"+data[i].entity_name+"</td><td align='right' id='account_num_v'>"+data[i].acct_num+"</td><td id='account_name_v'>"+data[i].acct_name+"</td><td>"+data[i].meaning+"</td><td align='center' data-value='"+data[i].status+"'><span class='label label-"+type+"'>"+title+"</span></td><td align='center'><div style='cursor:default;' class='state icheckbox_square-green "+checks+"'></div></td><td align='center' style='padding-left:1px;padding-right:1px;'><button class='btn btn-sm btn-outline btn-info btn-xs edit' entid='"+data[i].entity_id +"' acctid='"+data[i].account_id +"' title='Edit'><i class='fa fa-pencil-square-o fa-lg'></i></button><button class='btn btn-sm btn-outline btn-info btn-xs view' title='View' entid='"+data[i].entity_id +"' acctid='"+data[i].account_id +"'><i class='fa fa-file-text-o fa-lg'></i></button><button class='btn btn-sm btn-outline btn-info btn-xs delete' title='Delete'><i class='fa fa-trash-o fa-lg'></i></button></td></tr>";
                            }else{
                                tmp += "<tr><td align=''>"+data[i].entity_name+"</td><td align='right' id='account_num_v'>"+data[i].acct_num+"</td><td id='account_name_v'>"+data[i].acct_name+"</td><td>"+data[i].meaning+"</td><td align='center' data-value='"+data[i].status+"'><span class='label label-"+type+"'>"+title+"</span></td><td align='center'><div style='cursor:default;' class='state icheckbox_square-green "+checks+"'></div></td><td align='center'><button class='btn btn-sm btn-outline btn-info btn-xs edit' entid='"+data[i].entity_id +"' acctid='"+data[i].account_id +"' title='Edit'><i class='fa fa-pencil-square-o fa-lg'></i></button><button class='btn btn-sm btn-outline btn-info btn-xs view' entid='"+data[i].entity_id +"' acctid='"+data[i].account_id +"' title='View'><i class='fa fa-file-text-o fa-lg'></i></button></td></tr>";
                            }
                            count++;

                        });
                       //$('#result_account').html(data).trigger('footable_redraw');
                        $('#result_account').html(tmp);
                        $('.dataTables').DataTable( {
                            "order": [[ 1, "desc" ]],
                            "columnDefs": [ {
                              "targets": 'no-sort',
                              "orderable": false,
                            }],
                            "sDom": 'tip'
                        } );
                        notifymsg('success','<b>Success</b>: '+count+' Result(s) Found.');
                    }
                },
                complete: function() {
                    $("#search_account").removeAttr("disabled");
                    $('#loading-icon-search').hide();
                },
                beforeSend: function(){
                    $("#search_account").attr("disabled", true);
                    $('#loading-icon-search').show();
                }
            });
         });
        $('#account_form_search').validate({
            rules: {
                 entity_name_s: {
                    required: true
                 },
                 acct_num_s: {
                    required: true
                 },
                 acct_name_s: {
                    required: true
                 }
             }
        });
    });
</script>